<template>
  <backContainer>
    <div class="flexBet">
      <!-- 信息列表 -->
      <card :width="272" class="infobox">
        <div class="titlebox">
          <div class="overTxt shou">
            {{ info.courseName }}
          </div>
        </div>
        <div class="detail">
          <div class="flex line" v-if="info.courseType !== '1'">
            <div class="label">专业大类</div>
            <div class="value">
              <div
                v-if="info.majorType == item.value"
                v-for="(item, index) of dict.type.major_category"
                :key="index"
              >
                {{ item.label }}
              </div>
            </div>
          </div>
          <div class="flex line">
            <div class="label">专业名称</div>
            <div class="value">{{ info.majorName }}</div>
          </div>
          <div class="flex line" v-if="info.courseType !== '1'">
            <div class="label">课程类型</div>
            <div class="value">
              <div
                v-if="info.courseType == item.value"
                v-for="(item, index) of dict.type.course_type"
                :key="index"
              >
                {{ item.label }}
              </div>
            </div>
          </div>
          <div class="flex line">
            <div class="label">主讲教师</div>
            <div class="value" style="font-weight: 600">
              {{ info.principalName }}
            </div>
          </div>
          <div
            class="flex line"
            v-if="info.teacherIds.length > 0 ? true : false"
          >
            <div class="label">辅助教师</div>
            <div class="value flex">
              {{ info.teacherNames }}
            </div>
          </div>
          <div class="flex line" v-if="info.studyTime">
            <div class="label">基准学时</div>
            <div class="value">{{ info.studyTime }}时</div>
          </div>
          <div class="flex line" v-if="info.workstationList">
            <div class="label">关联工作站</div>
            <div class="value">
              {{ info.workstationList }}
            </div>
          </div>
          <!-- <div class="flex line">
            <div class="label">学习类型</div>
            <div class="value" style="color: #28b28b" v-if="info.type == 0">
              必修
            </div>
            <div class="value" style="color: #2cacff" v-if="info.type == 1">
              选修
            </div>
            <div class="value" style="color: #9649e4" v-if="info.type == 2">
              考证
            </div>
            <div class="value" style="color: #f89a33" v-if="info.type == 3">
              工学
            </div>
          </div> -->
          <div class="flex line">
            <div class="label">课程要求</div>
            <div class="sw_value color_red">
              {{
                info.passAllStatus == 1
                  ? '所有学生所有考核都通过可结束课程'
                  : '学生考核结果不影响结束课程'
              }}
            </div>
          </div>
          <div class="flex line">
            <div class="label">学习要求</div>
            <div class="sw_value color_red">
              {{
                info.jumpStatus == 1
                  ? '强制按照课程内容顺序学习'
                  : '不限制课程内容的学习顺序'
              }}
            </div>
          </div>

          <div
            class="flex line"
            v-if="info.framePic ? info.framePic.length > 0 : false"
          >
            <div class="label">学习框架图</div>
            <div class="value"></div>
          </div>
          <div
            style="display: flex; flex-direction: column; align-items: center"
          >
            <el-image
              v-for="(item, index) in info.framePic"
              :key="index"
              class="frame_pic"
              :src="item"
              :preview-src-list="info.framePic"
            >
            </el-image>
          </div>
        </div>
      </card>
      <!-- 课程介绍 -->
      <card :width="910" class="courseIntroduce rela" style="margin-left: 16px">
        <div class="courseIntroducetitle">课程介绍</div>
        <div class="courseIntroducecontain">
          <div class="cards">
            <div
              class="card"
              v-for="(item, index) in cards"
              :style="{
                backgroundImage: 'url(' + item.bg + ')',
                backgroundSize: 'contain',
              }"
              :key="index"
            >
              <div class="label" :style="{ color: item.color }">
                {{ item.label }}
              </div>
              <div class="value">{{ item.value }}</div>
            </div>
          </div>
          <template v-if="info.teachingObjectives">
            <div class="chapterlable">课程目标:</div>
            <div
              class="chaptervalue"
              style="white-space: pre-wrap; text-indent: -0.3em"
            >
              {{ info.teachingObjectives }}
            </div>
          </template>
          <template v-if="info.describe">
            <div class="chapterlable">课程描述:</div>
            <div
              class="chaptervalue"
              style="white-space: pre-wrap; text-indent: -0.3em"
            >
              {{ info.describe }}
            </div>
          </template>
          <template v-if="info.content">
            <div class="chapterlable">学习内容:</div>
            <div
              class="chaptervalue"
              style="white-space: pre-wrap; text-indent: -0.3em"
            >
              {{ info.content }}
            </div>
          </template>
          <template v-if="info.teachingMethod">
            <div class="chapterlable">教学组织方式:</div>
            <div
              class="chaptervalue"
              style="white-space: pre-wrap; text-indent: -0.3em"
            >
              {{ info.teachingMethod }}
            </div>
          </template>
          <template v-if="info.studyTools">
            <div class="chapterlable">工具/材料/设备:</div>
            <div
              class="chaptervalue"
              style="white-space: pre-wrap; text-indent: -0.3em"
            >
              {{ info.studyTools }}
            </div>
          </template>
          <template v-if="info.studyData">
            <div class="chapterlable">学习资料:</div>
            <div
              class="chaptervalue"
              style="white-space: pre-wrap; text-indent: -0.3em"
            >
              {{ info.studyData }}
            </div>
          </template>
          <template v-if="info.teachingPlace">
            <div class="chapterlable">教学场地描述:</div>
            <div style="width: 670px">
              <div
                class="chaptervalue"
                style="white-space: pre-wrap; text-indent: -0.3em"
              >
                {{ info.teachingPlace }}
              </div>
              <div class="chapterPic flex" style="margin-left: 13px">
                <el-image
                  v-for="(item, index) in info.teachingPlacePic"
                  :key="index"
                  class="image"
                  :src="item"
                  :preview-src-list="info.teachingPlacePic"
                >
                </el-image>
              </div>
            </div>
          </template>
          <!-- <template v-if="info.teachingPlacePic.length > 0">
            <div class="chapterlable">教学场地:</div>
          </template> -->
          <template v-if="info.teachingAssessment">
            <div class="chapterlable">教学考核要求:</div>
            <div
              class="chaptervalue"
              style="white-space: pre-wrap; text-indent: -0.3em"
            >
              {{ info.teachingAssessment }}
            </div>
          </template>

          <template v-if="info.teacherResource">
            <div class="chapterlable">师资团队:</div>
            <div
              class="chaptervalue"
              style="white-space: pre-wrap; text-indent: -0.3em"
            >
              {{ info.teacherResource }}
            </div>
          </template>
        </div>
        <el-button
          v-if="pageType == 'apply'"
          style="right: 40px; bottom: 32px; padding: 12px 34px"
          type="primary"
          round
          class="absolute"
          @click="handleApply"
        >报名
        </el-button>
        <el-button
          v-if="pageType == 'study'"
          style="right: 40px; bottom: 32px; padding: 12px 20px"
          type="primary"
          round
          v-preventReClick
          class="absolute"
          @click="handleStudy"
        >开始学习
        </el-button>
      </card>
    </div>
  </backContainer>
</template>

<script>
import { homeCourseInfo, startLearning, selectCourse } from '@/api/home'
import { allTeacherList } from '@/api/course/course'
import videoReview from '@/components/videoReview/videoReview'

export default {
  components: { videoReview },
  dicts: ['course_type', 'major_category'],
  props: {
    type: {
      type: String,
      default: ''
    },
    courseSchedulingId: [Number, String],
    courseId: [Number, String],
    workstationId: [Number, String]
  },
  data() {
    return {
      //
      pageType: '',
      applyOpen: false,
      cards: [
        {
          label: '基准学时',
          value: 0,
          color: '#41B0FF',
          bg: require('@/assets/images/indexCard2.png')
        },
        {
          label: '总内容数',
          value: 0,
          color: '#F46A42',
          bg: require('@/assets/images/indexCard3.png')
        },
        {
          label: '总课程资料 ',
          value: 0,
          color: '#F79E47',
          bg: require('@/assets/images/indexCard4.png')
        },
        {
          label: '总考核数',
          value: 0,
          color: '#6386E0 ',
          bg: require('@/assets/images/indexCard5.png')
        }
      ],
      info: {
        teacherIds: '',
        teachingPlacePic: [],
        courseVideo: [],
        moreDoc: []
      },
      commonTeacher: []
    }
  },
  watch: {},
  methods: {
    lookFiles(url) {
      window.open(url)
    },
    /* 获取老师列表 */
    async getTeacher() {
      let res = await allTeacherList({
        schoolId: this.$store.getters.schoolId,
        pageNum: 1,
        pageSize: 9999
      })
      this.commonTeacher = res.rows
    },
    //关闭所有通知
    closeAllNotification() {
      this.$notify.closeAll()
    },
    /* 获取课程详情 */
    async getInfo() {
      let res = await homeCourseInfo(this.courseSchedulingId)
      res.data.framePic = res.data.framePic ? res.data.framePic.split(',') : []
      res.data.teachingPlacePic = res.data.teachingPlacePic
        ? res.data.teachingPlacePic.split(',')
        : []
      res.data.courseVideo = res.data.courseVideo
        ? JSON.parse(res.data.courseVideo)
        : []
      res.data.moreDoc = res.data.moreDoc ? JSON.parse(res.data.moreDoc) : []
      this.cards[0].value = res.data.studyTime
      this.cards[1].value = res.data.contentCount
      this.cards[2].value = res.data.fileCount
      this.cards[3].value = res.data.examCount
      this.info = res.data
    },
    toCourseDetail(courseStuId) {
      this.$router.replace({
        name: 'taskList',
        query: {
          courseId: this.courseId,
          courseSchedulingId: this.courseSchedulingId,
          courseStuId: this.$route.query.courseStuId
            ? this.$route.query.courseStuId
            : courseStuId
        }
      })
    },
    /* 报名 */
    async handleApply() {
      this.$modal
        .confirm('是否确定报名此课程')
        .then(() => {
          selectCourse(
            this.courseSchedulingId,
            this.$store.getters.studentId
          ).then((res) => {
            this.$modal.msgSuccess('报名成功')
            this.pageType = 'study'
          })
        })
        .catch(() => {
        })
    },
    /* 开始学习 */
    handleStudy() {
      this.$modal
        .confirm('是否确认开始学习')
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: '正在处理...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          startLearning(this.courseSchedulingId, this.$store.getters.studentId)
            .then((res) => {
              this.$modal.msgSuccess('开始学习成功')
              this.toCourseDetail(res.data)
              loading.close()
            })
            .catch(() => {
              loading.close()
            })
        })
        .catch(() => {
        })
    }
  },
  destroyed() {
    this.closeAllNotification()
  },
  created() {
  },
  mounted() {
    this.pageType = this.type
    this.getTeacher()
    if (this.courseId) {
      this.getInfo()
    }
  }
}
</script>
<style scoped lang="scss">
.infobox {
  .titlebox {
    height: 72px;
    box-sizing: border-box;
    border-bottom: 1px solid #edeff0;

    .overTxt {
      // margin-right: 24px;
      margin-left: 24px;
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
      font-weight: 600;
      width: 214px;
      color: #333333;
      line-height: 72px;
    }

    img.mune {
      width: 20px;
      height: 20px;
      margin: auto 20px auto 0;
    }
  }

  .detail {
    padding: 24px;
    height: calc(100vh - 68px - 18px - 115px);
    overflow: auto;

    .line {
      margin-bottom: 16px;

      .label {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #999999;
        line-height: 22px;
      }

      .sw_value {
        width: 144px;
        margin-left: 16px;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
        font-weight: 400;
        color: #333333;
        line-height: 22px;
      }

      .value {
        word-wrap: break-word;
        width: 140px;
        margin-left: 16px;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
        font-weight: 400;
        color: #333333;
        line-height: 22px;

        .teacher {
          margin-right: 16px;
        }
      }
    }
  }
}

.courseIntroduce {
  box-sizing: border-box;
  padding: 40px 24px 0 24px;

  .courseIntroducecontain {
    box-sizing: border-box;
    padding-bottom: 80px;
    margin-top: 10px;
    height: calc(100vh - 68px - 18px - 115px);
    overflow: auto;
  }

  .courseIntroducecontain::-webkit-scrollbar {
    display: none;
  }

  .courseIntroducetitle {
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #333333;
    line-height: 25px;
  }

  .cards {
    display: flex;
    justify-content: space-around;
    margin-top: 32px;
    margin-bottom: 78px;

    .card:nth-last-of-type(1) {
      margin-right: 0;
    }

    .card {
      margin-right: 22px;
      width: 152px;
      height: 96px;
      border-radius: 24px;
      box-sizing: border-box;
      padding: 30px 0 0 73px;

      .label {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC, sans-serif;
        font-weight: 500;
        line-height: 20px;
      }

      .value {
        font-size: 32px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #333333;
        line-height: 39px;
      }
    }
  }

  .chapterlable {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
    margin-bottom: 16px;
  }

  .chaptervalue {
    word-wrap: break-word;
    width: 856px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #999999;
    line-height: 22px;
    margin-bottom: 32px;
  }

  .chapterPic {
    margin-bottom: 32px;

    .image {
      width: auto !important;
      margin-right: 48px;
      margin-bottom: 10px;
      height: 195px;
    }
  }
}

.frame_pic {
  width: 224px;
  height: auto;
  margin-bottom: 10px;
}

.color_red {
  font-weight: 600;
  color: #e95756 !important;
}

.view_img {
  width: 102px;
  height: 102px;
  border-radius: 8px;
  margin-left: 12px;
  position: relative;
}

.video_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  border-radius: 8px;
  cursor: pointer;
}

.video_img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  position: absolute;
}

.other_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 8px;
  align-items: center;
  background: #f5f5f5;
  cursor: pointer;

  .el-icon-document {
    margin-top: 8px;
    font-size: 24px;
    color: #565656;
  }

  .other_text {
    margin-top: 6px;
    font-size: 12px;
    color: #565656;
    display: flex;
    align-items: center;

    span {
      display: inline-block;
      width: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
